<template>
	<view class="pb-150">
		<!-- 顶部背景 + 导航 -->
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
			mode="aspectFill" />
		<u-navbar :title="index == 1 ? '抽样单' : index == 2 ? '检测单' : '检测结果公示列表'" :autoBack="true" leftIconColor="#fff"
			bgColor="transparent" :titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder />

		<view class="w-710 mgt bgff pl-32 pr-32 br-20 pt-20 pb-20" v-for="(item, index) in list" :key="item.id">
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">采样编号</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.sampleCode}}</view>
			</view>
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">抽样场所</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.detectionPlace }}</view>
			</view>
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">样品名称</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.product}}</view>
			</view>
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">采样时间</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.sampleTime}}</view>
			</view>
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">被抽样单位(个人)</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.ext3 }}</view>
			</view>
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">采样地区</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.address }}</view>
			</view>

			<view style="display: flex;align-items: center;justify-content: flex-end;">
				<view class="w-132 h-52 colfff bg rowsc rowsm br-32" @click="godetail(item.id)">详情</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		cyjclist
	} from '@/api/sylin/index.js'
	export default {
		data() {
			return {
				list: [],
				id: '',
				index: '',
			};
		},
		onLoad(options) {
			this.index = options.index
			this.getcyjclist(options.id, options.city)
		},
		methods: {
			async godetail(id) {
				uni.navigateTo({
					url: `/pages/workbench/01task/cydetail/cydetail?id=${id}`
				})
			},
			async getcyjclist(oldId, productId) {
				const res = await cyjclist({
					pageNum: 1,
					pageSize: 99999,
					oldId,
					productId
				})
				console.log(res)
				this.list = res.rows
			}
		},
		computed: {
			navbarHeight() {
				// 如果设置了自定义高度，则使用自定义高度
				if (this.customNavbarHeight) {
					return this.customNavbarHeight;
				}
				// 否则自动计算：状态栏高度 + 导航栏高度
				const systemInfo = uni.getSystemInfoSync();
				// 将px转换为rpx (1px = 2rpx)
				const statusBarHeightRpx = systemInfo.statusBarHeight * 2;
				const navbarHeightRpx = 44 * 2; // 44px = 88rpx
				return statusBarHeightRpx + navbarHeightRpx;
			},
		}
	}
</script>

<style lang="scss">
	$green: #0A993B;
	$green-2: #23a44b;
	$line: #E5F3EA;
	$gray: #999;

	.tongguo {
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;

		.tg {
			width: 40%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: green;
			height: 80rpx;
			border-radius: 40rpx;
		}

		.bh {
			width: 40%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: red;
			height: 80rpx;
			border-radius: 40rpx;
		}
	}

	.mine-navbar-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: 1;
	}

	/* 驳回弹窗样式 */
	.reject-modal {
		width: 650rpx;
		background: #fff;
		border-radius: 14rpx;
		overflow: hidden;
	}

	.reject-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 28rpx 12rpx;
		border-bottom: 1rpx solid $line;
	}

	.reject-header .title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.reject-body {
		padding: 20rpx 28rpx;
	}

	.form-item {
		margin-bottom: 18rpx;
	}

	.label {
		display: inline-block;
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.label.required::before {
		content: '*';
		color: #f56c6c;
		margin-right: 6rpx;
	}

	.picker-input {
		height: 88rpx;
		border: 1rpx solid $line;
		border-radius: 10rpx;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.picker-text {
		color: #333;
		font-size: 28rpx;
	}

	.picker-text.placeholder {
		color: #bbb;
	}

	.reject-footer {
		display: flex;
		gap: 16rpx;
		padding: 10rpx 28rpx 24rpx;
	}

	/* 下拉列表样式 */
	.type-item {
		position: relative;
	}

	.dropdown {
		position: absolute;
		left: 0;
		right: 0;
		top: 140rpx;
		background: #fff;
		border: 1rpx solid $line;
		border-radius: 10rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
		z-index: 20;
		max-height: 300rpx;
		overflow: auto;
	}

	.dropdown-item {
		padding: 22rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.dropdown-item+.dropdown-item {
		border-top: 1rpx solid $line;
	}

	.di-text {
		font-size: 28rpx;
		color: #333;
	}
</style>